<template>
  <div class="w-full">
    <div v-if="media?.length === 1">
      <el-image
        class="w-[100%] aspect-[1/1] max-w-96 rounded-lg"
        :src="media[0]"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="media"
        :initial-index="0"
        :hide-on-click-modal="true"
        fit="cover" />
    </div>

    <div v-if="media?.length === 2" class="flex gap-1">
      <el-image
        v-for="(item, index) in media"
        :key="index"
        class="w-full aspect-[1/1] max-w-40 rounded-lg"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="media"
        :initial-index="index"
        :hide-on-click-modal="true"
        fit="cover" />
    </div>

    <div v-if="media?.length === 3" class="flex gap-1">
      <el-image
        v-for="(item, index) in media"
        :key="index"
        class="w-40 h-40 rounded-lg"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="media"
        :initial-index="index"
        :hide-on-click-modal="true"
        fit="cover" />
    </div>

    <div v-if="media?.length === 4" class="grid grid-cols-2 grid-rows-2 gap-1 float-start">
      <el-image
        v-for="(item, index) in media"
        :key="index"
        class="w-full aspect-[1/1] max-w-60 rounded-lg"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="media"
        :initial-index="index"
        :hide-on-click-modal="true"
        fit="cover" />
    </div>

    <div v-if="media?.length > 4" class="grid grid-cols-3 gap-1 w-[400px]">
      <el-image
        v-for="(item, index) in media"
        :key="index"
        class="w-full aspect-[1/1] max-w-60 rounded-lg"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="media"
        :initial-index="index"
        :hide-on-click-modal="true"
        fit="cover" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  media: Array,
})
</script>

<style scoped lang="scss"></style>
